<style type="text/css">

    .seat {width:50px;background:#000;color:red;}
    #seatingPlan {border:1px;}

</style>
<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    //<![CDATA[
    $(document).ready(function(){
        document.getElementById('purchasedSeat').value='';
    });
    function submitCheck()
    {
        if(document.getElementById("purchasedSeat").value == "")
        {
            alert("Please choose a seat!");
            return false;
        }
        else{
            return true;
        }
    }
    function resetSeats()
    {
        var strSeats=document.getElementById("purchasedSeat").value;
        var arrSeats=strSeats.split(",");
        for(var i=0;i<arrSeats.length;i++)
        {
            document.getElementById(arrSeats[i]).disabled="";
            document.getElementById(arrSeats[i]).style.background='#111';
        }
        var strSeats=document.getElementById("purchasedSeat").value="";
        return true;
    }
    function chooseSeats(button)
    {
        document.getElementById('purchasedSeat').value+=button.value+',';
        button.disabled="disabled";
        button.style.background= '#FFF';
        return true;
    }
    //]]>
</script>
<jsp:include page="../seatingPlan/seatingPlan.jsp" />
<form action="<%=request.getAttribute("formAction")%>" method="post" class="movieform" onsubmit="return submitCheck()" onreset="return resetSeats()">
    <input name="action" type="hidden" value="chooseSeats" />
    <label>Choosed Seat(s): </label><input type="text" id="purchasedSeat" value="" name="purchasedSeat" id="purchasedSeat" readonly="readonly" />
    <div class="button">
        <input type="submit" value="Continue" />
        <input type="reset" value="Reset" />
        <input type="button" name="btnCancel" value="Cancel Purchasing" onclick="javascript:window.location='index.do'" />
    </div>
</form>
